<template>
	<view>
		<view class="nav">
			<uni-nav-bar left-icon="back" left-text="返回" right-text="清空" shadow @clickRight="delAllMessage"></uni-nav-bar>
		</view>
		<view class="item-box" v-for="(item,index) in newsData" :key="index" @longpress="delMessageItem(item.msgId)">
			<view>
				<view>{{item.msgtitle}}</view>
				<view>{{item.msgdate}}</view>
			</view>
			<view>{{item.msgcontent}}</view>
		</view>
	</view>
</template>

<script>
	import {
		reactive,
		toRefs
	} from 'vue'
	import store from '../../store/index.js'
	import { onShow } from '@dcloudio/uni-app'
	import myRequest from '../../utils/myRequest.js'
	export default {
		setup() {
			let data = reactive({
				newsData: [],
				getNews() {
					let vipid = JSON.stringify(store.state.userdata[0].vipId);
					myRequest({
						url:'/appusermessage',
						data:{vipid}
					}).then(res=>{
						console.log(res.data)
						data.newsData = res.data.data
					})
				},
				//删除单项消息
				delMessageItem(id) {
					console.log(id)
					uni.showModal({
						content: '是否删除？',
						success: function (e) {
							if (e.confirm) {
								myRequest({
									url:'/delusermsgitem',
									method:'post',
									data:{id}
								}).then(res=>{
									console.log(res)
									data.getNews()
								})
							} else if (e.cancel) {
								
							}
						}
					});
				},
				//清空消息
				delAllMessage() {
					let id = store.state.userdata[0].vipId;
					console.log(id)
					uni.showModal({
						content: '确定全部删除吗？',
						success: function (e) {
							if (e.confirm) {
								myRequest({
									url:'/deluserallmsg',
									method:'post',
									data:{id}
								}).then(res=>{
									console.log(res)
									data.getNews()
								})
							} else if (e.cancel) {
								
							}
						}
					});
				}
			})
			onShow(()=>{
				data.getNews()
			})
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-box {
		display: flex;
		flex-direction: column;
		height: 250rpx;
		justify-content: space-between;
		padding: 50rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F2F2F2;

		>view:nth-of-type(1) {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			color: #333333;
		}

		>view:nth-of-type(2) {
			font-size: 28rpx;
			color: #B399B3;
		}
	}
</style>
